<template>
  <el-card>
    <el-table border :data="reaNameList">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column label="申请者手机号" align="center">
        <template #default="{ row }">
          {{ row.user?.phone }}
        </template>
      </el-table-column>
      <el-table-column
        label="实名姓名"
        align="center"
        prop="reaName"
      ></el-table-column>
      <el-table-column label="证件类型" align="center">
        <template #default="{ row }">
          <el-tag type="primary" v-if="row.cardType == 1">身份证</el-tag>
          <el-tag type="success" v-else>户口本</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="证件号码"
        align="center"
        prop="cardNumber"
      ></el-table-column>
      <el-table-column label="审核状态" align="center">
        <template #default="{ row }">
          <el-tag type="warning" v-if="row.status == 1">审核中</el-tag>
          <el-tag type="success" v-if="row.status == 2">审核通过</el-tag>
          <el-tag type="danger" v-if="row.status == 3">审核未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center">
        <template #default="{ row }">
          {{ row.createAt?.split("T")[0] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="info"
            icon="InfoFilled"
            size="small"
            title="详情"
            @click="showReaNameInfo(row._id)"
          ></el-button>
          <el-button
            type="danger"
            icon="delete"
            size="small"
            v-if="row.status == 3"
            title="删除"
            @click="deleteReaName(row._id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
     
      background
      layout=" jumper,prev, pager, next, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <el-drawer v-model="drawer"  size="700"  :with-header="false" >
    <el-descriptions class="margin-top" title="实名详情" :column="2" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <user />
            </el-icon>
            真实姓名
          </div>
        </template>
        {{ reaNameInfo.reaName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <iphone />
            </el-icon>
            电话号码
          </div>
        </template>
        {{ reaNameInfo.user?.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <location />
            </el-icon>
            证件类型
          </div>
        </template>
       <el-tag v-if="reaNameInfo.cardType==1" type="primary"  >身份证</el-tag>
       <el-tag type="success" v-else >户口本</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <tickets />
            </el-icon>
            当前状态
          </div>
        </template>
        <el-tag type="warning" v-if="reaNameInfo.status==1" >审核中</el-tag>
        <el-tag type="info" v-if="reaNameInfo.status==2" >审核通过</el-tag>
        <el-tag type="danger" v-if="reaNameInfo.status==3" >审核失败</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <office-building />
            </el-icon>
            身份证号
          </div>
        </template>
        {{ reaNameInfo.cardNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <Clock />
            </el-icon>
            提交时间
          </div>
        </template>
        {{ reaNameInfo.createAt?.split("T")[0] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <Money />
            </el-icon>
            图片
          </div>
        </template>
        <el-image
      style="width: 100px; height: 100px"
      :src="reaNameInfo.cardImg"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[reaNameInfo.cardImg]"
      :initial-index="4"
      fit="cover"
    />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer v-if="reaNameInfo.status==1" >
      <el-button  type="danger" @click="NoPassReaName(reaNameInfo._id)" >拒绝</el-button>
      <el-button  type="primary" @click="passReaName(reaNameInfo._id)" >同意</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getReaNameListAPI, getReaNameInfoAPI , passReaNameAPI , NoPassReaNameAPI , deleteReaNameAPI } from "@/api/reaName";
import { ElMessageBox , ElMessage } from "element-plus";
let drawer = ref(false);
let reaNameList = ref([]);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let reaNameInfo = ref({})
onMounted(() => {
  getReaNameList();
});
const handleSizeChange = () => {
  getReaNameList();
};
const handleCurrentChange = () => {
  getReaNameList();
};
//获取实名认证列表
const getReaNameList = async () => {
  let result = await getReaNameListAPI(pageNo.value, pageSize.value);
  reaNameList.value = result.data;
  total.value = result.total;
};
//显示实名认证详情
const showReaNameInfo = async (id) => {
  drawer.value = true;
  let result = await getReaNameInfoAPI(id);
  reaNameInfo.value = result.data
};
//通过实名的回调
const passReaName = (id)=>{
  ElMessageBox.confirm("是否通过该实名认证?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning"
  }).then( async ()=>{
    await passReaNameAPI(id)
    ElMessage.success("通过成功")
    getReaNameList()
    drawer.value = false
  }).catch(()=>{
    ElMessage({
        type: 'info',
        message: '取消',
      })
  })
}
//拒绝实名的回调
const NoPassReaName = (id)=>{
  ElMessageBox.confirm("是否拒绝该实名认证?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning"
  }).then( async ()=>{
    await NoPassReaNameAPI(id)
    ElMessage.success("拒绝通过成功")
    getReaNameList()
    drawer.value = false
  }).catch(()=>{
    ElMessage({
        type: 'info',
        message: '取消',
      })
  })
}
//删除实名的回调
const deleteReaName = (id)=>{
  ElMessageBox.confirm("是否删除该实名认证?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning"
  }).then( async ()=>{
    await deleteReaNameAPI(id)
    ElMessage.success("删除成功")
    getReaNameList()
  }).catch(()=>{
    ElMessage({
      type: 'info',
        message: '取消',
      })
  })
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
